<template>
  <div>
    <div>
      <el-descriptions border style="margin: 10px 0">
        <el-descriptions-item>
          <template slot="label">
            后台账号
          </template>
          <el-input v-model="tbAccount"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            后台密码
          </template>
          <el-input v-model="tbPassword" type="password" show-password></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div>
      <el-card>
        <div slot="header">
          <span>目标设置</span>
          <div style="width: 300px;float: right;">
            <el-button style="display: inline-block;float: right;padding: 3px 0" type="text" @click="addCategory()">
              添加目标
            </el-button>
            <el-input style="width:250px;display: inline-block;float: right;bottom: 30px;right: 70px"
                      v-model="category" placeholder="请输入品类"></el-input>
          </div>
        </div>
        <div style="text-align: center;margin: 20px 0" v-if="categorySearchList.length > 0">
              <span style="font-size: 15px;color: #bdc3c7">
                注 : 会根据该设置品类获取本店与竞品
              </span>
        </div>
        <div style="margin:10px 0" v-for="(categorySearch,index) in categorySearchList">
          <el-descriptions :column="3">

            <template slot="title">
              <el-tooltip effect="dark" content="点击修改此品类" placement="top">
                <span style="font-size: 20px;letter-spacing: 1px" @click="updateCategory(categorySearch)">
                  {{categorySearch.name}}
                </span>
              </el-tooltip>
            </template>

            <template slot="extra">

              <el-tooltip effect="dark" content="数据周期(注意:账号不支持选择30天时,默认选择7天)" placement="top-start">
                <el-select
                    style="width: 140px"
                    v-model="categorySearch.dateCycle"
                    placeholder="请选择数据周期"
                    size="small"
                >
                  <el-option
                      v-for="item in ['7天','30天']"
                      :key="item"
                      :label="item"
                      :value="item">
                  </el-option>
                </el-select>
              </el-tooltip>

              <el-button
                  style="margin-left: 10px"
                  type="primary"
                  size="small"
                  @click="addGoodsFeature(categorySearch)"
              >
                对此品类添加指定商品
              </el-button>
              <el-popconfirm
                  style="margin-left: 10px"
                  confirm-button-text='好的'
                  cancel-button-text='不用了'
                  icon="el-icon-info"
                  icon-color="red"
                  title="确认删除这个品类吗？"
                  @confirm="removeArrayByIndex(categorySearchList,index)"
              >
                <el-button
                    slot="reference"
                    type="danger"
                    size="small"
                >
                  删除该品类
                </el-button>
              </el-popconfirm>
            </template>

          </el-descriptions>

          <div style="margin: 5px 0 10px 0">
            <el-button
                type="warning"
                size="small"
                @click="addIgnoreName(categorySearch)"
            >
              添加商品标题不允许出现的字符
            </el-button>
            <el-button
                type="success"
                size="small"
                @click="addContainName(categorySearch)"
            >
              添加商品标题必须包含的字符
            </el-button>
          </div>

          <div style="" v-if="categorySearch.goodsFeatureList.length > 0">
            <el-divider>目标商品</el-divider>
            <div v-for="(goods,goodsIndex) in categorySearch.goodsFeatureList" style="margin-bottom: 10px">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-tooltip effect="dark" content="本店商品编号" placement="top">
                    <el-input
                        placeholder="请输入本店商品编号(必须精确)"
                        v-model="categorySearch.goodsFeatureList[goodsIndex]['productId']"
                        clearable>
                    </el-input>
                  </el-tooltip>
                </el-col>

                <el-col :span="12">
                  <el-tooltip effect="dark" content="最低客单价" placement="top" style="margin-right: 15px">
                    <el-input-number
                        size="mini"
                        v-model="categorySearch.goodsFeatureList[goodsIndex].priceScope[0]"
                        :min="1"
                        :max="categorySearch.goodsFeatureList[goodsIndex].priceScope[1]"
                        :precision="2"
                        label="描述文字">
                    </el-input-number>
                  </el-tooltip>

                  <el-tooltip effect="dark" content="最高客单价" placement="top">
                    <el-input-number
                        size="mini"
                        v-model="categorySearch.goodsFeatureList[goodsIndex].priceScope[1]"
                        :min="categorySearch.goodsFeatureList[goodsIndex].priceScope[0]"
                        :precision="2"
                        :max="100000"
                        label="描述文字">
                    </el-input-number>
                  </el-tooltip>
                </el-col>

                <el-col :span="4">
                  <el-tooltip effect="dark" content="删除该目标商品" placement="top">
                    <el-button
                        type="danger"
                        icon="el-icon-delete"
                        @click="removeArrayByIndex(categorySearch.goodsFeatureList,goodsIndex)"
                    ></el-button>
                  </el-tooltip>
                </el-col>
              </el-row>

              <el-row :gutter="20" style="margin-top: 10px">
                <el-col :span="12">
                  <el-tooltip effect="dark" content="一号竞品(非必填)" placement="top">
                    <el-input
                        size="mini"
                        placeholder="一号竞品商品编号(必须精确)"
                        v-model="categorySearch.goodsFeatureList[goodsIndex]['competing1']"
                        clearable>
                    </el-input>
                  </el-tooltip>
                </el-col>

                <el-col :span="12">
                  <el-tooltip effect="dark" content="二号竞品(非必填)" placement="top">
                    <el-input
                        size="mini"
                        placeholder="二号竞品商品编号(必须精确)"
                        v-model="categorySearch.goodsFeatureList[goodsIndex]['competing2']"
                        clearable>
                    </el-input>
                  </el-tooltip>
                </el-col>
              </el-row>

            </div>
          </div>

          <div>
            <div
                v-if="categorySearch.ignoreNameList.length > 0"
                style="text-align: center"
            >
              <el-divider>标题不允许出现的字符</el-divider>
            </div>
            <el-tag
                type="warning"
                style="margin: 0 5px 5px 0"
                :key="tag"
                v-for="(tag,ignoreNameIndex) in categorySearch.ignoreNameList"
                closable
                :disable-transitions="false"
                @close="removeArrayByIndex(categorySearch.ignoreNameList,ignoreNameIndex)">
              {{tag}}
            </el-tag>
          </div>

          <div>
            <div
                v-if="categorySearch.containNameList.length > 0"
                style="text-align: center"
            >
              <el-divider>标题必须包含的字符</el-divider>
            </div>
            <el-tag
                type="success"
                style="margin: 0 5px 5px 0"
                :key="tag"
                v-for="(tag,containNameIndex) in categorySearch.containNameList"
                closable
                :disable-transitions="false"
                @close="removeArrayByIndex(categorySearch.containNameList,containNameIndex)">
              {{tag}}
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>

    <div style="margin-top: 10px">
      <el-card :body-style="{ padding: '10px' }">
        <div slot="header">
          <span>关键词忽略设置</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="addIgnoreKey">添加忽略字段</el-button>
          <el-input style="width:250px;display: inline-block;float: right;bottom: 10px;right: 10px"
                    v-model="ignoreKey" placeholder="请输入忽略字段"></el-input>
        </div>
        <div style="text-align: center;margin: 20px 0" v-if="ignoreKeys.length > 0">
              <span style="font-size: 15px;color: #bdc3c7">
                注 : 忽略字段是指关键词中包含此字段会被忽略. (例 : 忽略字段为"官方"那"赫巴兹官方旗舰店"就会被忽略)
              </span>
        </div>
        <div>
          <el-tag
              style="margin: 0 5px 5px 0"
              :key="tag"
              v-for="(tag,index) in ignoreKeys"
              closable
              :disable-transitions="false"
              @close="removeArrayByIndex(ignoreKeys,index)">
            {{tag}}
          </el-tag>
        </div>
        <div>
          <el-descriptions border :column="2" style="margin: 10px 0">
            <el-descriptions-item>
              <template slot="label">
                <span style="color: #2f3542;font-weight: bold">访问数量小于此数的忽略</span>
              </template>
              <el-input-number :min="0" v-model="competingMinVisits"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <span style="color: #2f3542;font-weight: bold">支付转化率低于此数的忽略(百分比)</span>
              </template>
              <el-input-number :min="0" :max="100" v-model="competingMinRoi"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <span style="color: #2f3542;font-weight: bold">是否忽略包含字母的关键词</span>
              </template>
              <el-switch
                  v-model="keyIsNotContainLetter"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {isNull} from "@/utils/service";
import msg from "@/utils/message";

export default {
  name: "competingGoodKey",
  props: {
    params: {
      type: Object,
      required: false
    }
  },
  watch: {
    'params': {
      handler(val) {
        this.initParams({...this.params})
      }
    }
  },
  created() {
    this.initParams({...this.params})
  },
  data() {
    return {
      tbAccount: '',
      tbPassword: '',
      category: '',
      ignoreKey: '',
      competingMinVisits: 0,
      competingMinRoi: 0,
      /* 忽略包含字母的关键词 */
      keyIsNotContainLetter: false,
      /*
      * 品类搜索对象列表
      * {name(品类名称),
      * dateCycle(数据周期7天或30天),
      * ignoreNameList(忽略包含指定商品列表),
      * containNameList(忽略不包含指定商品列表),
      * goodsFeatureList[{goods_id(商品id),min_price(最小价格),competing1(竞品1),competing2(竞品2))(商品特征)}]
      * }
      * */
      categorySearchList: [],
      ignoreKeys: [],
    }
  },
  methods: {
    isNull: isNull,
    initParams({
                 tbAccount = '', tbPassword = '', competingMinVisits = 0,
                 competingMinRoi = 0,
                 ignoreKeys = [],
                 categorySearchList = [], keyIsNotContainLetter = false
               } = {}) {
      this.tbAccount = tbAccount;
      this.tbPassword = tbPassword;
      this.ignoreKeys = ignoreKeys
      this.competingMinVisits = competingMinVisits
      this.competingMinRoi = competingMinRoi
      this.categorySearchList = categorySearchList
      this.keyIsNotContainLetter = keyIsNotContainLetter
    },
    getParam() {
      let _t = this
      let data = {
        tbAccount: _t.tbAccount,
        tbPassword: _t.tbPassword,
        ignoreKeys: _t.ignoreKeys,
        competingMinVisits: _t.competingMinVisits,
        competingMinRoi: _t.competingMinRoi,
        categorySearchList: _t.categorySearchList,
        keyIsNotContainLetter: _t.keyIsNotContainLetter,
      }
      return {
        ...data
      }
    },
    checkParam() {
      let _t = this
      let err = "[ 生意参谋-竞争对手好词 ]"
      if (isNull(_t.tbAccount)) {
        msg.warning(err + " 请填写后台账号")
        return false;
      }
      if (isNull(_t.tbPassword)) {
        msg.warning(err + " 请填写后台密码")
        return false;
      }
      if (isNull(_t.categorySearchList)) {
        msg.warning(err + " 至少添加一个目标品类")
        return false;
      }
      if (isNull(_t.competingMinVisits) || _t.competingMinVisits < 0) {
        msg.warning(err + " 忽略访问数量不合法此参数最小为 0")
        return false;
      }
      if (isNull(_t.competingMinRoi) || _t.competingMinRoi < 0) {
        msg.warning(err + " 忽略最低转化率不合法此参数最小为 0")
        return false;
      }
      return true
    },
    addCategory() {
      let category = this.category.trim();
      if (!isNull(category)) {
        if (this.categorySearchList.some(item => item.name === category)) {
          msg.warning("该品类已经存在")
          return;
        }
        this.categorySearchList.push({
          name: category, dateCycle: '30天', ignoreNameList: [],
          containNameList: [], goodsFeatureList: []
        });
        this.category = "";
      }
    },
    addIgnoreKey() {
      let ignoreKey = this.ignoreKey.trim();
      if (!isNull(ignoreKey)) {
        if (this.ignoreKeys.includes(ignoreKey)) {
          msg.warning("该字段已经存在")
          return;
        }
        this.ignoreKeys.push(ignoreKey);
        this.ignoreKey = "";
      }
    },
    addIgnoreName(categorySearch) {
      this.$prompt('对分类  [ ' + categorySearch.name + ' ] 下的商品添加标题不允许出现的字符', '添加忽略字符', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '支持一次输入多个例如:(平底锅,炒锅)'
      }).then(({value}) => {
        if (isNull(value)) {
          return;
        }
        let newList = value.split(/[,，]/)
            .map(item => item.trim())
            .filter(item => item !== '')
        let hasIntersection = categorySearch.ignoreNameList.concat(categorySearch.containNameList).some(old => {
          old = old.toString()
          return newList.some(newStr => newStr === old || old.includes(newStr) || newStr.includes(old))
        })
        if (hasIntersection) {
          msg.warning("新增的字符已经存在");
          return;
        }
        categorySearch.ignoreNameList = [
          ...new Set(categorySearch.ignoreNameList.concat(newList))
        ]
      }).catch((err) => {
        console.log(err)
      })
    },
    addContainName(categorySearch) {
      this.$prompt('对分类  [ ' + categorySearch.name + ' ] 下的商品添加必须包含的字符', '添加包含字符', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '支持一次输入多个例如:(平底锅,炒锅)'
      }).then(({value}) => {
        if (isNull(value)) {
          return;
        }
        let newList = value.split(/[,，]/)
            .map(item => item.trim())
            .filter(item => item !== '')
        let hasIntersection = categorySearch.containNameList.concat(categorySearch.ignoreNameList).some(old => {
          old = old.toString()
          return newList.some(newStr => newStr === old || old.includes(newStr) || newStr.includes(old))
        })
        if (hasIntersection) {
          msg.warning("新增的字符已经存在");
          return;
        }
        categorySearch.containNameList = [
          ...new Set(categorySearch.containNameList.concat(newList))
        ]
      }).catch((err) => {
        console.log(err)
      })
    },
    addGoodsFeature(categorySearch) {
      categorySearch.goodsFeatureList.unshift({productId: "", priceScope: [100.0,100.0], competing1: '', competing2: ''})
    },
    updateCategory(categorySearch) {
      this.$prompt('', '修改品类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        if (isNull(value)) {
          return
        }
        categorySearch.name = value
      }).catch((err) => {
        console.log(err)
      })
    },
    removeArrayByIndex(arr, index) {
      console.log(arr)
      arr.splice(index, 1);
    },
  }
}
</script>

<style scoped>

</style>